<template>
	<el-tabs
		v-model="tabValue"
		type="border-card"
		closable
		class="heightFull"
		@tab-remove="removeTab"
		@tab-click="clickTab"
	>
		<el-tab-pane
			v-for="item in tabsData"
			:key="item.name"
			:label="item.title"
			:name="item.name"
			:index="item.name"
			class="heightFull"
		/>
	</el-tabs>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Getter, Action, namespace } from '@/assets/model/vueutils/VuexUtil';

const menustore = namespace('menustore');

export default class MultiTab extends Vue {
	//菜单路由的store 字段、方法
	@menustore.State('tabsValue') tabsValue: any;
	@menustore.State('tabsData') tabsData: any;
	@menustore.State('router') router: any;
	@menustore.Getter('getTabsValue') tabsValues: any;
	@menustore.Getter('getTabsData') tabsDatas: any;
	@menustore.Mutation('addTabs') addTabs: any;
	@menustore.Mutation('removeTab') removeTabs: any;
	@menustore.Mutation('changeTabsValue') changeTabsValue: any;
	get tabValue() {
		return this.tabsValue;
	}
	set tabValue(value) {
		this.changeTabsValue(value);
	}
	public removeTab(targetName: any) {
		this.removeTabs(targetName);
		let actionTab = this.tabsDatas.filter((t: any) => t.name == this.tabsValue);
		if (actionTab.length == 1) {
			this.$router.push(actionTab[0].router);
		} else {
			this.$router.push('/main/blank');
		}
	}
	public clickTab(tab: any) {
		let tabData = tab.props;
		let actionTab = this.tabsDatas.filter((t: any) => t.name == tabData.name);
		this.$router.push(actionTab[0].router);
	}
}
</script>
